// 引入vuex模块
import { createStore } from 'vuex';

// 需要用到的状态数据
const state = {
    user: {
        name: "Hydra",
        age: 35,
        mobile: "13547811112",
        school: "电子科技大学"
    },
    stus: [
        {name: "陈科地",age: 22,sex: "男"},
        {name: "聂仔鑫",age: 24,sex: "男"},
        {name: "龙雪",age: 21,sex: "女"},
        {name: "肖雯雯",age: 21,sex: "女"},
    ]
};

const getters = {
    girlList(state) {
        return state.stus.filter(v => v.sex == '女');
    },
    // getters中的函数可以有第二个参数，可以调用其它getters结果
    girlListSize(state,getters) {
        return getters.girlList.length;
    },
    // getters中的函数，也可以返回一个函数供组件去回调
    getListAsSex(state) {
        return function(sex) {
            return state.stus.filter(v => v.sex == sex);
        }
    },
    // 实际开发中，getters返回函数用箭头函数简化后，可能很难读懂
    // 返回性别、年龄等于传入性别年龄的同学列表
    getListAsSexAndAge: (state,getters) => (sex,age) => getters.getListAsSex(sex).filter(v => v.age == age),
}

const mutations = {
    // state: 当前state的引用
    // payload: 传递过来的值
    setUserName(state,payload) {
        state.user.name = payload;
    },
    setUserMobile(state,payload) {
        state.user.mobile = payload;
    },
    setUserSchool(state,payload) {
        state.user.school = payload;
    },
    setUserAge(state,payload) {
        state.user.age = payload;
    },
    // 推荐payload传对象，因为可以一次性传递多个值
    setUser(state,payload) {
        Object.assign(state.user,payload);
    },
    addStu(state,payload) {
        state.stus.push(payload);
    }
}

const actions = {
    // context: vuex上下文对象，利用它可以访问state,getters,mutations……
    dispatchStu(context,payload) {
        console.log("异步更新：",payload);
        // actions的方法中，可以包含异步代码
        setTimeout(() => {
            context.commit("addStu",payload);
            // 虽然可以通过context.state直接操作state，但是不推荐。
            // context.state.stus.push(payload);
        },1000)   
    }
}

// 使用创建函数创建vuex对象
export default createStore({
    // state: 状态（需要在系统中要到的数据）
    state,
    mutations,
    getters,
    actions
});